<script lang="ts" setup>
import { useAppStore } from "@/pinia/stores/app"
import { useSettingsStore } from "@/pinia/stores/settings"
import { useUserStore } from "@/pinia/stores/user"
import Notify from "@@/components/Notify/index.vue"
import Screenfull from "@@/components/Screenfull/index.vue"
import SearchMenu from "@@/components/SearchMenu/index.vue"
import ThemeSwitch from "@@/components/ThemeSwitch/index.vue"
import { useDevice } from "@@/composables/useDevice"
import { useLayoutMode } from "@@/composables/useLayoutMode"
import { UserFilled } from "@element-plus/icons-vue"
import { Breadcrumb, Hamburger, Sidebar } from "../index"
import { ElMessage, ElMessageBox } from 'element-plus'
import { TUIKit } from '../../../../TUIKit';
import { TUICallKit } from '@tencentcloud/call-uikit-vue';
import { CustomerServiceChat } from '@/tui-customer-service-plugin-vue';

import vipImg from '/static/img/member0.png';
import vipImg1 from '/static/img/member1.png';
import vipImg2 from '/static/img/member2.png';
import vipImg3 from '/static/img/member3.png';

import { TUILogin } from "@tencentcloud/tui-core"

import { inject } from 'vue'
const CL: any = inject("$CL");
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();//登录国籍
const IMVisible = ref<boolean>(false);
const IMAIVisible = ref<boolean>(false);


const { isMobile } = useDevice()
const { isTop } = useLayoutMode()
const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const { showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)

const userSig = ref<string>("");

watch(
  () => userStore.openIM,
  (newUser, oldUser) => {
    if (newUser) {
      IMVisible.value = true;
    }
  },
  { deep: true }
)
// watch(
//   () => userStore.openIMAI,
//   (newUser, oldUser) => {
//     if(newUser) {
//       IMAIVisible.value = true;
//     }
//   },
//   { deep: true }
// )
watch(
  () => userStore.userSig,
  (newUser, oldUser) => {
    console.log("newUser====================", newUser)
    if (newUser) {
      userSig.value = newUser;
    }
  },
  { deep: true, immediate: true }
)

/** 切换侧边栏 */
function toggleSidebar() {
  appStore.toggleSidebar(false)
}

const openIm = () => {
  IMVisible.value = true;
}
const openImAi = () => {
  IMAIVisible.value = true;
}

const closeIM = () => {
  userStore.setOpenIM(false);
}
const closeIMAI = () => {
  userStore.setOpenIMAI(false);
}

/** 登出 */
function logout() {
  ElMessageBox.confirm(
    t('common.确认退出登录？'),
    t('common.提示'),
    {
      confirmButtonText: t('common.确认'),
      cancelButtonText: t('common.取消'),
      customClass: "new_box",
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: t('common.退出登录成功'),
      })
      TUILogin.logout();
      userStore.logout()
      router.push("/login")
    })
    .catch(() => {

    })

}

const getImg = (val: string | number) => {
  if(val === 1) return vipImg1;
  if(val === 2) return vipImg2;
  if(val === 3) return vipImg3;
  return vipImg;
}



</script>

<template>
  <div class="navigation-bar">
    <!-- <Hamburger
      v-if="!isTop || isMobile"
      :is-active="appStore.sidebar.opened"
      class="hamburger"
      @toggle-click="toggleSidebar"
    /> -->
    <!-- <Breadcrumb v-if="!isTop || isMobile" class="breadcrumb" /> -->
    <div></div>
    <Sidebar v-if="isTop && !isMobile" class="sidebar" />
    <div class="right-menu">
      <SearchMenu v-if="showSearchMenu" class="right-menu-item" />
      <Screenfull v-if="showScreenfull" class="right-menu-item" />
      <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />

      <!-- 个人信息 -->
      <div class="person-info-wrapper flex flex-items-center">
        <div class="flex flex-items-center" mr-18px>
          <el-image w-32px h-32px border-rd-16px :src="userStore.avatar" fit="fill">
            <template #error>
              <div class="image-slot">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
          <!-- <span class="color-#4E5969" ml-12px mr-12px font-size="16px" font-500>{{ userStore[CL('username')] }}</span> -->
          <span class="color-#4E5969" ml-12px mr-12px font-size="16px" font-500>{{ locale=='zh' ? userStore.username: userStore.username_ru }}</span>
          <el-image :src="getImg(userStore.level || 0)" w-20px h-20px></el-image>
        </div>
        <!-- <el-button type="warning" round class="bg-#FF6A00 border-none" @click="openIm">{{ $t('common.随心问信息')
          }}</el-button> -->
        <!-- <el-button type="primary" round @click="openImAi">{{ $t('common.联系客服') }}</el-button> -->
        <el-button plain round @click="logout">{{ $t('common.退出登录') }}</el-button>
        <!-- <Notify v-if="showNotify" class="right-menu-item" /> -->
      </div>
    </div>
  </div>

  <el-dialog v-model="IMVisible" class="im_wrap" :title="$t('common.随心问信息')" @close="closeIM">
    <TUIKit />
    <TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
  </el-dialog>


  <!-- <el-dialog v-model="IMAIVisible" class="im_wrap" :title="$t('common.联系客服')" @close="closeIMAI">
    <CustomerServiceChat :sdkAPPID="userStore.IM_SDKAppID"
    :userID="userStore.PERFIX + userStore.mobile"
    :userSig="userSig" />
  </el-dialog> -->

</template>

<style lang="scss" scoped>
.navigation-bar {
  height: var(--v3-navigationbar-height);
  overflow: hidden;
  color: var(--v3-navigationbar-text-color);
  display: flex;
  justify-content: space-between;

  .hamburger {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    cursor: pointer;
  }

  .breadcrumb {
    flex: 1;

    // 参考 Bootstrap 的响应式设计将宽度设置为 576
    @media screen and (max-width: 576px) {
      display: none;
    }
  }

  .sidebar {
    flex: 1;
    // 设置 min-width 是为了让 Sidebar 里的 el-menu 宽度自适应
    min-width: 0px;

    :deep(.el-menu) {
      background-color: transparent;
    }

    :deep(.el-sub-menu) {
      &.is-active {
        .el-sub-menu__title {
          color: var(--el-color-primary);
        }
      }
    }
  }

  .right-menu {
    margin-right: 10px;
    height: 100%;
    display: flex;
    align-items: center;

    &-item {
      margin: 0 10px;
      cursor: pointer;

      &:last-child {
        margin-left: 20px;
      }
    }

    .user {
      display: flex;
      align-items: center;

      .el-avatar {
        margin-right: 10px;
      }

      span {
        font-size: 16px;
      }
    }
  }
}


.person-info-wrapper .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
  border-radius: 50%;
}
.person-info-wrapper .image-slot .el-icon {
  font-size: 16px;
}


</style>
